<template>
    <SubsystemBox title="疲劳检测" subTitle="识别结果">
        <template #upload>
            <video :src="videoUrl"></video>
        </template>
        <template #detail>
            <p class="row">
                <span class="title">检测人脸：</span>
                <span class="content">111</span>
            </p>
            <p class="row">
                <span class="title">深度眨眼：</span>
                <span class="content">111</span>
            </p>
            <p class="row">
                <span class="title">深度打哈欠：</span>
                <span class="content">111</span>
            </p>
            <p class="row">
                <span class="title">疲劳警告：</span>
                <span class="content">111</span>
            </p>
            <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple
                :limit="3"
                :on-exceed="handleExceed"
                :file-list="fileList"
            >
                <el-button size="small" type="primary">上传视频</el-button>
                <div slot="tip" class="el-upload__tip">
                    只能上传jpg/png文件，且不超过500kb
                </div>
            </el-upload>
        </template>
    </SubsystemBox>
</template>
<script>
import SubsystemBox from '@/components/SubsystemBox/index.vue'

export default {
    name: 'CarNumber',
    data() {
        return {
            imageUrl: '',
            videoUrl: '',
            fileList: [
                {
                    name: 'food.jpeg',
                    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
                },
                {
                    name: 'food2.jpeg',
                    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
                },
            ],
        }
    },
    components: { SubsystemBox },
    mounted() {},
    methods: {
        handleRemove(file, fileList) {
            console.log(file, fileList)
        },
        handlePreview(file) {
            console.log(file)
        },
        handleExceed(files, fileList) {
            this.$message.warning(
                `当前限制选择 3 个文件，本次选择了 ${
                    files.length
                } 个文件，共选择了 ${files.length + fileList.length} 个文件`
            )
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`)
        },
    },
}
</script>
<style lang="scss" scoped></style>
